<template>
  <div ref="lineChart01" class="line-chart-01 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from 'vue'

const lineChart01 = ref(null)
const echarts = inject('$echarts')


let xcData = [
  { 1: 500, 2: 800, 3: 600, 4: 240, date: '1月' },
  { 1: 450, 2: 730, 3: 400, 4: 340, date: '2月' },
  { 1: 600, 2: 560, 3: 440, 4: 420, date: '3月' },
  { 1: 500, 2: 660, 3: 600, 4: 300, date: '4月' },
  { 1: 650, 2: 820, 3: 650, 4: 400, date: '5月' },
  { 1: 900, 2: 420, 3: 710, 4: 450, date: '6月' },
  { 1: 620, 2: 570, 3: 700, 4: 380, date: '7月' },
  { 1: 420, 2: 890, 3: 790, 4: 480, date: '8月' },
  { 1: 600, 2: 500, 3: 590, 4: 420, date: '9月' },
  { 1: 450, 2: 510, 3: 630, 4: 380, date: '10月' },
  { 1: 800, 2: 610, 3: 700, 4: 360, date: '11月' },
  { 1: 420, 2: 650, 3: 760, 4: 330, date: '12月' },
];
let xdata = xcData.map((item) => item.date);
let rq = xcData.map((item) => item[1]);
let ql = xcData.map((item) => item[2]);
let dl = xcData.map((item) => item[3]);
let wf = xcData.map((item) => item[4]);
const yAxis = [
  {
    name: '燃气巡查',
    data: rq,
    color: '#2ce9ff',
  },
  {
    name: '桥梁巡查',
    data: ql,
    color: '#46f889',
  },
  {
    name: '道路巡查',
    data: dl,
    color: '#3678ff',
  },
  {
    name: '危房巡查',
    data: wf,
    color: '#fcce6c',
  },
];
const legend = ['燃气巡查', '桥梁巡查', '道路巡查', '危房巡查'];
let seriesList = [];

yAxis.forEach((item) => {
  seriesList.push({
    name: item.name,
    type: 'line',
    symbolSize: 3,
    symbolBorder: item.color,
    data: item.data,
    itemStyle: {
      normal: {
        color: item.color,
        lineStyle: {
          color: item.color,
          width: 2,
        },
      },
    },
  });
});

const option = {
  compCode: 'C202312011',
  backgroundColor: "#003366",
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
    // axisPointer: {
    //   type: 'shadow',
    // },
    axisPointer: {
      type: 'line',
    },
    //   extraCssText: 'width:180px;height:100px;',
    //   confine: true,
    //   formatter: function (params) {
    //     let paramsHtml = `<div style="padding-left:10px">${params[0].name}</div>`;
    //     params.forEach(item => {
    //       const listName = item.seriesName.replace('.', '月') + '识别重车';
    //       paramsHtml += `<div style="width:175px;height:20.5px;display:flex;justify-content: center;align-items: center;">
    //         <div>${item.marker}</div>
    //         <div style="margin-right:30px">${listName}</div>
    //         <div>${item.value}</div>
    //       </div>`;
    //     });
    //     return paramsHtml;
    //   },
  },
  legend: {
    data: legend,
    textStyle: {
      align: 'center',
      fontSize: 12,
      color: '#fff',
    },
    itemGap: 20,
    top: '2%',
    left: '30%',
  },
  grid: {
    top: '18%',
    left: '12%',
    right: '6%',
    bottom: '10%',
  },
  xAxis: [
    {
      type: 'category',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#366078',
        },
      },
      axisTick: {
        show: false,
      },
      // splitArea: {
      //   // show: true,
      //   color: "#f00",
      //   lineStyle: {
      //     color: "#f00",
      //   },
      // },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 12,
          fontWeight: 400,
        },
        margin: 10,
        // rotate: 30,
      },
      splitLine: {
        show: false,
      },
      // axisLabel: {
      //   margin: 10,
      // },
      boundaryGap: false,
      data: xdata,
    },
  ],
  yAxis: [
    {
      type: 'value',
      // min: 0,
      // max: 140,
      splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#366078',
          type: 'dashed',
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#366078',
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
          fontSize: 12,
          fontWeight: 400,
        },
      },
      // splitArea: {
      //   show: true,
      //   areaStyle: {
      //     color: ['rgba(227, 237, 255, 0.05)', 'rgba(227, 237, 255, 0)'],
      //   },
      // },
      axisTick: {
        show: false,
      },
    },
  ],
  series: seriesList,
};



onMounted(() => {
  const chart = echarts.init(lineChart01.value)
  chart.setOption(option)
})
</script>

<style scoped></style>
